<template>
  <div class="mian">
    <div class="outDiv">
      <div>
        <headerBack></headerBack>
        <div class="scrollerDiv">
          <div class="stepImage">
            <img src="~/static/images/step3.png" style="width: 100%" />
          </div>
          <div class="progressBarWrap"></div>

          <div class="container">
            <div class="include">
              <x-circle :percent="percent" :stroke-width="10" stroke-color="#FFAD0D" trail-color="#F1F1F1" :trail-width="10">
                <div class="innerDiv" @click="gotosBalance">
                  <div>
                    <div style="height: 1rem;" v-if="loadflag == false">
                      <img class="imgIcon" src="~/static/images/volunteer_icon_click.png" alt />
                    </div>
                    <div style="height: 0.5rem" v-else></div>
                  </div>
                  <p>{{ loadflag ? percent + '%' : '' }}</p>
                  <p>{{ loadflag ? '生成方案中...' : '生成方案' }}</p>
                </div>
              </x-circle>
            </div>
          </div>
        </div>
      </div>
      <div class="x-vip-buy" v-show="xBuy">
        <div class="vipBuys">
          <img class="imgIcon" src="~/static/images/volunteer_icon_lock.png" alt />
          <span class="vipSp">您的生成方案次数用完了，请重新购买服务</span>
          <div class="flex-h vipBtn">
            <span @click="closeXbuy" class="bt1 flex1">关闭</span>
            <span class="bt2 flex1" @click="openVip">购买</span>
          </div>
        </div>
      </div>
      <call-taost :show="showCall" :phone="18971638225" @cancel="gos">
        <a slot="body" class="call">考生信息或者偏好填写有误，请致电 18971638225 或微信添加 sxzxxq 咨询相关工作人员</a>
      </call-taost>
    </div>
  </div>
</template>

<script>
import { XCircle } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
import Header from '~/components/Header'
import ls from 'store2'
import { setInterval, clearInterval } from 'timers'
import headerBack from '~/components/headerBack'
import callTaost from '~/components/callTaost'
import { generateSolutions } from '~/api/volunteer'
import warnTaost from '~/components/warnTaost'
export default {
  components: {
    Header,
    scrollerEdit,
    XCircle,
    headerBack,
    callTaost,
  },
  data() {
    return {
      showCall: false,
      isShowBar: false,
      percentage: 0,
      xBuy: false,
      votimes: 0,
      nun: 0,
      loadflag: false,
      percent: 0,
      timer: null,
      timeOutEvent: 0,
      userType: null,
      productCode: '',
    }
  },
  mounted() {
    this.$visit(this.$route.path)
    this.userType = this.$route.query.type
  },
  methods: {
    gos() {
      this.showCall = false
    },
    possessBar() {
      this.timer = setInterval(() => {
        this.percentage += 1

        if (this.percentage > 100) {
          clearInterval(this.timer)
          this.percentage = 100
        }
      }, 6000)
    },
    closeXbuy() {
      this.xBuy = false
      this.nun = 0
    },
    openVip() {
      let url = encodeURIComponent(process.env.workUrl + '/wx-yxk/#/volunteer/stepOne')
      this.commonJs.checkCodeVip('sx0005', url, process.env.mallId)
    },

    getStudentInfo() {
      generateSolutions(ls.get('userType'))
        .then((res) => {
          if (res.code === '0') {
            ls.set('caseData1', res.data.balance)
            ls.set('caseData2', res.data.academy)
            ls.set('caseData3', res.data.major)
            this.percent = 100
            if (this.percent === 100) {
              setTimeout(() => {
                this.$hideLoading()
                ls.set('preUrl', 'stepThree')
                this.commonJs.gosto('programme')
              }, 500)
            }
            return false
          }
          if ((res.code = '1200004')) {
            this.showCall = true
            clearInterval(this.timer)
            this.$hideLoading()
            return false
          }
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },
    gotosBalance() {
      // this.isShowBar = true;
      // this.possessBar();

      this.nun += 1
      if (this.nun === 1) {
        this.circleTurnAround() //不带卡券
        this.getStudentInfo()
        this.loadflag = true
        //带卡券模式
      }
    },
    //开始按
    gotouchstart() {
      let that = this
      clearTimeout(this.timeOutEvent) //清除定时器
      this.timeOutEvent = 0
      this.circleTurnAround()
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gotouchend() {
      clearInterval(this.timer)
      clearTimeout(this.timeOutEvent)
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（尤如onclick事件）
        // this.percent += 1;
      }
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gotouchmove() {
      clearInterval(this.timer)
      clearTimeout(this.timeOutEvent) //清除定时器
      this.timeOutEvent = 0
    },
    circleTurnAround() {
      this.timer = setInterval(() => {
        this.percent += 1

        if (this.percent > 100) {
          clearInterval(this.timer)
          this.percent = 100
        }
      }, 3000)
    },
  },
}
</script>

<style lang="less" scoped>
.call {
  font-size: 0.3rem;
}
.progressBarWrap {
  height: 0.2rem;
}

.vue-progress-bar {
  width: 6.3rem;
  height: 0.2rem;
  margin: 0 auto;

  .vue-progress-bar__outer {
    background: #eee;
    // width: 6.3rem;
    width: 100%;
    height: 0.2rem;
    border-radius: 0.1rem;
  }

  .vue-progress-bar__perent {
    width: 0.8rem;
    text-align: center;
    line-height: 0.2rem;

    span {
      font-size: 0.24rem;
      color: #222;
    }
  }
}

.vue-progress-bar__inner {
  height: 0.2rem;
  display: block;
  background: @mainColor;
  width: 0;
  border-radius: 0.1rem;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  -webkit-transition: width 3s ease;
  -moz-transition: width 3s ease;
  transition: width 3s ease;
  -webkit-animation: progressbar 7s infinite;
  animation: progressbar 7s infinite;
}

.x-vip-buy {
  position: fixed;
  width: 7.5rem;
  height: 100vh;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 4;

  .vipBuys {
    width: 5rem;
    height: auto;
    border-radius: 0.1rem;
    background: #fff;
    margin: 25vh auto;
    overflow: hidden;

    .imgIcon {
      display: block;
      width: 1.2rem;
      height: 1.2rem;
      margin: 0.5rem auto 0.2rem;
    }

    .vipSp {
      display: block;
      height: auto;
      padding: 0 0.5rem;
      font-size: 0.3rem;
      color: @mainColor;
      line-height: 0.4rem;
      text-align: center;
      font-weight: bold;
      box-sizing: border-box;
    }

    .vipBtn {
      width: 100%;
      padding: 0 0.5rem;
      margin: 1rem auto 0.5rem;

      .bt1,
      .bt2 {
        height: 0.8rem;
        border-radius: 0.1rem;
        letter-spacing: 0.05rem;
        font-size: 0.3rem;
        font-weight: bold;
        text-align: center;
        line-height: 0.8rem;
      }

      .bt1 {
        border: 1px solid #eee;
        background: #fff;
        color: #999;
        margin-right: 0.2rem;
      }

      .bt2 {
        border: none;
        background: @mainColor;
        color: #fff;
      }
    }
  }
}

.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .scrollerDiv {
    width: 100%;

    .stepImage {
      margin-bottom: 0.9rem;
      padding: 0 0.3rem;
    }

    .container {
      width: 100%;
      height: 7.5rem;
      background: url('https://static.shengxue985.com/sxzx_wechat/images/volunteer_pic_bg_slices.png') no-repeat;
      background-size: 100% 100%;
      padding-top: 2.1rem;

      .include {
        margin: 0 auto;
        width: 3.4rem;
        height: 3.4rem;

        .innerDiv {
          border-radius: 50%;
          margin-left: 0.3rem;
          width: 2.8rem;
          height: 2.8rem;
          text-align: center;
          padding-top: 0.54rem;
          background: #fff;
          -webkit-touch-callout: none;
          /*系统默认菜单被禁用*/
          -webkit-user-select: none;
          /*webkit浏览器*/
          -khtml-user-select: none;
          /*早期浏览器*/
          -moz-user-select: none;
          /*火狐*/
          -ms-user-select: none;
          /*IE10*/
          user-select: none;

          div {
            padding-bottom: 0.2rem;

            .imgIcon {
              z-index: -1;
              width: 1rem;
              height: 1rem;
              pointer-events: none;
            }
          }

          p {
            color: @mainColor;
            font-size: 0.3rem;
            font-weight: bold;
            letter-spacing: 0.03rem;
          }
        }
      }
    }
  }
}

svg {
  width: 0.4rem;
  height: 0.4rem;
}
</style>
